<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div
    fxFlex="100"
    fxLayout="column"
    fxLayoutAlign="start start"
    class="pipeline-element-box"
    style="padding:5px;margin-bottom:10px;background:{{
        getSelectedBackground()
    }}"
    [ngStyle]="item.editable ? { opacity: 1 } : { opacity: 0.5 }"
>
    <div fxLayout="row" class="w-100">
        <i
            class="material-icons"
            [ngClass]="
                item.available
                    ? 'endpoint-icon-available'
                    : 'endpoint-icon-critical'
            "
            >lens</i
        >
        <span fxFlex></span>
        <span
            class="{{ itemTypeStyle }}"
            matTooltip="Endpoint {{
                item.available ? 'available' : 'not available'
            }}"
            >{{ itemTypeTitle }}</span
        >
    </div>
    <div fxFlex fxLayout="row" style="width: 100%">
        <div style="margin-right: 10px; margin-left: 10px; margin-top: 10px">
            <div
                *ngIf="!item.includesIcon || iconError"
                class="draggable-icon {{ cssMapper[item.serviceTagPrefix] }}"
            >
                {{ iconText(item.name) }}
            </div>
            <div
                *ngIf="item.includesIcon && iconReady"
                class="draggable-icon {{ cssMapper[item.serviceTagPrefix] }}"
            >
                <img class="icon" [src]="image" />
            </div>
        </div>
        <div fxFlex fxLayout="column">
            <div class="ml-5">
                <small *ngIf="!item.editable"
                    >Internally managed by {{ appConstants.APP_NAME }}</small
                >
            </div>
            <div fxFlex fxLayoutAlign="start end" class="ml-5">
                <button
                    class="small-button-add"
                    mat-button
                    mat-raised-button
                    color="accent"
                    [disabled]="!item.editable"
                    (click)="installSingleElement($event, item)"
                    *ngIf="!item.installed"
                >
                    <span>&nbsp;Install</span>
                </button>
                <button
                    class="small-button-add-inverted"
                    mat-button
                    mat-raised-button
                    [disabled]="!item.editable"
                    (click)="uninstallSingleElement($event, item)"
                    *ngIf="item.installed"
                >
                    <span>&nbsp;Uninstall</span>
                </button>
                <div *ngIf="item.installed" style="margin-left: 5px">
                    <button
                        class="small-button-add mat-basic no-min-width"
                        [disabled]="!item.editable"
                        mat-raised-button
                        mat-button
                        [matMenuTriggerFor]="menu"
                    >
                        <span style="font-size: 12px">...</span>
                    </button>
                    <mat-menu #menu="matMenu">
                        <button
                            mat-menu-item
                            (click)="refresh(item)"
                            [disabled]="!item.available"
                        >
                            <mat-icon>refresh</mat-icon>
                            <span>&nbsp;Update</span>
                        </button>
                        <button
                            mat-menu-item
                            (click)="
                                showPermissionsDialog(item.elementId, item.name)
                            "
                            [disabled]="!item.available"
                        >
                            <mat-icon>share</mat-icon>
                            <span>&nbsp;Manage permissions</span>
                        </button>
                    </mat-menu>
                </div>
            </div>
        </div>
    </div>
    <div
        fxFlex="100"
        fxLayout="column"
        style="padding-left: 10px; margin-top: 10px"
    >
        <div fxLayout="column">
            <div fxFlex fxLayout="column">
                <h3>
                    <b>{{ item.name }}</b>
                </h3>
                <p>{{ item.description }}</p>
            </div>
        </div>
    </div>
</div>
